<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        @click-left="back"
        left-arrow
      >
        <template #title>
          确认订单 {{timeshow}}
        </template>
      </van-nav-bar>
    </header>
    <div class="content">
      <van-sticky>
        <div v-if="userinfo.flag === 1" class="orderaddress" @click="toAddresslist">
          <!-- <h1>{{ userinfo.name }} <i>{{ userinfo.tel }}</i></h1> -->
          <!-- 手机号遮挡 -->
          <h1>{{ userinfo.name }} <i>{{ userinfo.tel.replace(userinfo.tel.slice(3, 7), '****') }}</i></h1>
          <p>{{ userinfo.province + userinfo.city + userinfo.county + userinfo.addressDetail }}</p>
        </div>
        <div v-else class="orderaddress" @click="toAddresslist">
          <p>点击添加地址</p>
        </div>
      </van-sticky>
      <van-card
        v-for="item of orderlist"
        :key="item.proid"
        :num="item.num"
        :price="item.price"
        :title="item.proname"
        :thumb="item.proimg"
      />
      <van-coupon-cell
        :coupons="coupons"
        :chosen-coupon="chosenCoupon"
        @click="showList = true"
      />
      <!-- 优惠券列表 -->
      <div class="popupBox">
        <van-popup
          v-model="showList"
          round
          position="bottom"
          width="80%;"
          style="height: 70%; padding-top: 4px;width:100%;border-raduis:8px;"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
      </div>
      <div class="confimInfo">
        <div>
          商品金额: ￥{{ totalprice }}
        </div>
        <div>
          运费： ￥0
        </div>
        <div>
          实付金额: ￥{{ totalprice}}
        </div>
      </div>
      <!-- <van-button block color="#f66" @click="pay" width="80%;">确认订单</van-button> -->
      <button class="btn" @click="pay">确认订单</button>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Dialog, Sticky, Card, CouponCell, CouponList, Popup, Button, Toast } from 'vant'
import { getOrderData, deleteOrder } from '@/api'
Vue.use(NavBar)
Vue.use(Card)
Vue.use(Sticky)
Vue.use(CouponCell)
Vue.use(CouponList)
Vue.use(Popup)
Vue.use(Button)
Vue.use(Toast)
const coupon = {
  available: 1,
  condition: '无使用门槛\n最多优惠10元',
  reason: '',
  value: 990,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '9.9',
  unitDesc: '元'
}
const coupon1 = {
  available: 1,
  condition: '无使用门槛\n最多优惠1000元',
  reason: '',
  value: 88800,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '888',
  unitDesc: '元'
}
const coupon2 = {
  available: 1,
  condition: '无使用门槛\n最多优惠1000元',
  reason: '',
  value: 18800,
  name: '优惠券名称',
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: '188',
  unitDesc: '元'
}
export default {
  data () {
    return {
      userinfo: {},
      orderlist: [],
      status: 0,
      orderid: '',
      totalprice: 0,
      chosenCoupon: -1,
      coupons: [coupon, coupon1, coupon2],
      disabledCoupons: [coupon],
      showList: false,
      timeshow: ''
    }
  },
  mounted () {
    const { orderid } = this.$route.params
    var time = 1800
    var timer = setInterval(() => {
      time -= 1
      this.timeshow = parseInt(time / 60) + '分' + parseInt(time % 60) + '秒'
      if (time === 0) {
        clearInterval(timer)
        deleteOrder({ orderid }).then(res => {
          console.log(res)
          if (res.data.code === '200') {
            Toast('订单已超时')
            this.$router.push('/')
          }
        })
      }
    }, 1000)
    getOrderData({ orderid }).then(res => {
      console.log(res.data)
      this.userinfo = res.data.data.userinfo
      this.orderlist = res.data.data.orderlist
      this.status = res.data.data.status
      this.orderid = orderid
      this.totalprice = res.data.data.totalprice
      this.oldprice = res.data.data.totalprice
    })
  },
  methods: {
    back () {
      Dialog.confirm({
        message: '便宜不等人，离开请三思'
      }).then(() => {
        // 需要删除订单
        const orderid = this.orderid
        deleteOrder({ orderid }).then(res => {
          console.log(res)
          if (res.data.code === '200') {
            this.$router.go(-1)
          }
        })
      }).catch(() => {
        // on cancel
      })
    },
    toAddresslist () {
      this.$router.push('/addresslist?orderid=' + this.orderid)
    },
    onChange (index) {
      this.showList = false
      this.chosenCoupon = index
      console.log(index)
      console.log(this.coupons[index])
      if (index !== -1) {
        this.totalprice = (this.oldprice - this.coupons[index].value / 100).toFixed(2)
      } else {
        this.totalprice = this.oldprice
      }
    },
    onExchange (code) {
      this.coupons.push(coupon)
    },
    pay () {
      // this.$router.replace('/pay/' + this.orderid)
      Toast('支付成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background:#f4f4f4;
}
.orderaddress {
  padding: 10px 15px;
  min-height: 50px;
  width:96%;
  margin:14px auto;
  vertical-align: middle;
  background:white;
  border-radius: 8px;
}
.van-card {
  background-color: white;
  width:96%;
  margin:14px auto;
  border-radius: 8px;
  :thumb {
    width: 20px;
    vertical-align: middle;
  }
}
.confimInfo {
  background-color: white;
  width:96%;
  margin:14px auto;
  border-radius: 8px;
  padding:2%;
  div {
    margin-top: 6px;
  }
}
.btn {
  display: block;
  width:96%;
  border:none;
  border-radius: 8px;
  background: #f66;
  color:white;
  height:40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  margin:10px auto;
}
</style>
